import React from 'react';
import { Box, Typography, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';

// Styled Components
import { 
  StyledPaper, 
  StyledAppButton 
} from 'components/objects/StyledComponents';

/**
 * SubscriberBenefits component displays a button to navigate to subscriber benefits
 * 
 * @param {Object} props - Component props
 * @param {Object} props.user - User object containing user information
 * @param {boolean} props.isActive - Whether the user account is active
 * @param {boolean} props.isTrial - Whether the user is on a trial plan
 * @param {Function} props.navigateOpen - Function to navigate to an external path
 * @param {Function} props.navigatePage - Function to navigate to an internal page
 * @return {JSX.Element} The rendered component
 */
const SubscriberBenefits = ({ user, isActive, isTrial, navigateOpen, navigatePage }) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const isDarkMode = theme.palette.mode === 'dark';

  const handleBenefitsClick = () => {
    // Navigate to the /subscribers path when clicked
    navigateOpen('/subscribers');
  };

  return (
    <StyledPaper darkMode={isDarkMode} sx={{ p: 3, mb: 3, width: '100%' }}>
      <Typography variant="h6" component="h2" sx={{ mb: 2 }}>
        {t('subscriberBenefits.title', { defaultValue: 'Subscriber Benefits' })}
      </Typography>
      
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        py={2}
      >
        <StyledAppButton 
          darkMode={isDarkMode}
          variant="contained" 
          color="primary"
          onClick={handleBenefitsClick}
          sx={{ py: 1.5, px: 3 }}
        >
          {t('subscriberBenefits.benefits', { defaultValue: 'Benefits' })}
        </StyledAppButton>
      </Box>
    </StyledPaper>
  );
};

export default SubscriberBenefits;